<template>
  <div class="staff-selector-container">
    <div class="list-group">
      <el-radio-group v-model="selectedGroupId" class="list-wrapper">
        <el-radio
          v-for="item in groupPreset"
          :label="item.name"
          :value="item.id"
          class="list-item"
        />
        <div class="list-footer list-footer"></div>
      </el-radio-group>
      <el-checkbox-group
        v-model="planningStore.selectedStaffIds"
        class="list-wrapper"
      >
        <el-checkbox
          v-for="item in filteredStaffPreset"
          :label="item.name"
          :value="item.id"
          class="list-item"
        />
        <div class="list-footer list-footer">
          <span class="list-footer-spacer" />
          <el-button type="primary" link @click="handleSelectAll">
            <el-icon><i-ep-circle-check-filled /></el-icon>
            <span>全选</span>
          </el-button>
        </div>
      </el-checkbox-group>
    </div>
    <el-icon><i-ep-arrow-right /></el-icon>

    <div class="list-wrapper list-wrapper-wide">
      <el-tag
        v-for="(item, index) in planningStore.selectedStaffs"
        :key="item.id"
        closable
        :disable-transitions="false"
        @close="handleRemoveStaff(index)"
        class="list-item-inline"
        >{{ item.name }}</el-tag
      >
      <div class="list-footer">
        <el-text type="primary">
          <span style="margin-right: 4px">已选</span>
          <b>{{ planningStore.selectedStaffs.length }}</b>
          <span style="margin-left: 4px">人</span>
        </el-text>
        <el-button type="primary" link @click="handleClear">
          <el-icon><i-ep-circle-close-filled /></el-icon>
          <span>清空</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import staffPreset from "@/profiles/staffs.json";
import optionPreset from "@/profiles/options.json";
import usePlanningStore from "@/stores/planningStore.js";

const planningStore = usePlanningStore();

const groupPreset = optionPreset.groups;

const selectedGroupId = ref();

const filteredStaffPreset = computed(() => {
  if (!selectedGroupId.value) {
    return [];
  }
  return staffPreset.filter((item) =>
    // 筛选出所属组别或已选择的员工
    // planningStore.selectedStaffIds.includes(item.id)
    item.groupIds.includes(selectedGroupId.value)
  );
});

const handleSelectAll = () => {
  planningStore.selectedStaffIds = filteredStaffPreset.value.map(
    (item) => item.id
  );
};

const handleClear = () => {
  planningStore.selectedStaffIds = [];
};

const handleRemoveStaff = (index) => {
  planningStore.selectedStaffIds.splice(index, 1);
};
//
</script>

<style scoped>
.staff-selector-container {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.list-wrapper {
  width: 200px;
  border: 1px solid #8888;
  border-radius: 8px;
  padding: 4px 4px 32px 4px;
  height: 300px;
  overflow: auto;
  position: relative;
}

.list-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* color: var(--el-bg-color); */
  /* background-color: var(--el-bg-color); */
  background-color: #8884;
}

.list-footer-primary {
  color: var(--el-bg-color);
  background-color: var(--el-color-primary);
}

.list-footer-info {
  color: var(--el-bg-color);
  background-color: var(--el-color-info);
}

.list-footer-success {
  color: var(--el-bg-color);
  background-color: var(--el-color-success);
}

.list-footer-spacer {
  flex: 1;
}

.list-wrapper-wide {
  width: 300px;
}

.list-item {
  width: 100%;
  transition: all 0.3s ease-in-out;
  margin: 0;
  padding-left: 16px;
}

.list-item:hover {
  background-color: #8884;
}

.list-item-inline {
  font-size: 14px;
  margin: 3px;
}

.list-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.list-group > * {
  border-top: 1px solid #8888;
  border-bottom: 1px solid #8888;
  border-right: 1px solid #8888;
  border-left: none;
  border-radius: 0;
}

.list-group > *:first-child {
  border-left: 1px solid #8888;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.list-group > *:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
</style>
